import { useComponentStore, useStore } from "@/store";
import type { questionComponentType } from "@/utils/type";
import { SmileOutlined } from "@ant-design/icons";

import { type FC } from "react";
import InputPropComponent from "./commpoent/input/inputPropComponent";
import TitlePropComponent from "./commpoent/title/titlePropComponent";
import ParagraphPropComponent from "./commpoent/paragraph/paragraphPropComponent";
import InfoPropComponent from "./commpoent/info/infoPropComponent";
import TextareaPropComponent from "./commpoent/textarea/textareaPropComponent";
import RadioPropComponent from "./commpoent/radio/radioPropComponent";
import CheckboxPropComponent from "./commpoent/checkbox/checkboxPropComponent";




const getPropComponent = (item: questionComponentType,onChange:(e:any)=>void) => {
  if (item.type === 'questionInput') return <InputPropComponent  onChange={onChange} {...item}></InputPropComponent>
  else if (item.type === 'questionTitle') return <TitlePropComponent   onChange={onChange} {...item} ></TitlePropComponent>
  else if (item.type === 'questionParagraph') return <ParagraphPropComponent  onChange={onChange} {...item}></ParagraphPropComponent>
  else if (item.type === 'questionInfo') return <InfoPropComponent  onChange={onChange} {...item}></InfoPropComponent>
  else if (item.type === 'questionTextarea') return <TextareaPropComponent  onChange={onChange} {...item}></TextareaPropComponent>
  else if (item.type === 'questionRadio') return <RadioPropComponent  onChange={onChange} {...item}></RadioPropComponent>
  else if (item.type === 'questionCheckbox') return <CheckboxPropComponent  onChange={onChange} {...item}></CheckboxPropComponent>
  else return <div>暂不支持该类型组件</div>

}


const ComponentAttribute: FC = () => {
  const store = useComponentStore();
  const {selectedId} = useStore()
  const componentItem = store.componentList.find(item => item.fe_id === selectedId) as questionComponentType


  const onChange = (e:any)=>{
     if(!componentItem) return
     const {fe_id,type,title,isHidden,isLocked} = componentItem

     store.updateComponent({fe_id,title,isHidden,isLocked,type,props:{...e}})
  }

  return (
    <div>
      {componentItem ? getPropComponent(componentItem,onChange) :
        <div style={{ marginTop: 20, textAlign: 'center', color: '#999', }}>
          <SmileOutlined style={{ fontSize: 20 }} />
          <p>暂无属性,请选择组件</p>
        </div>
      }
    </div>
  )
}

export default ComponentAttribute;